<template>
    <div id="helpTemp">
        <!-- 顶部 -->
       <div class="headerBg">
            <p class="sayHi">Hi,很高兴为你服务~</p>
            <ul class="tabs">
                <li v-for="(item,index) in mainVA" :key="index" @click="clickItem(item)">
                   <i><img :src="item.ico" /></i>
                   <p>{{item.title}}</p>
                </li>
            </ul>
       </div>
       <!-- 问题 -->
       <div class="issue">
           <div class="issueTitle"><i><img :src="issueIMG"></i><span>热门问题</span></div>
           <!-- 企业 -->
           <ul>
              <li v-for="(item,index) in companyVA" :key="index" @click="clickItem(item)">
                  <span>{{item.title}}</span>
                  <i></i>
              </li>
           </ul>
           <!-- 报表 -->
           <ul>
              <li v-for="(item,index) in reportVA" :key="index" @click="clickItem(item)">
                  <span>{{item.title}}</span>
                  <i></i>
              </li>
           </ul>
           <!-- 其它 -->
           <ul>
              <li v-for="(item,index) in otherVA" :key="index" @click="clickItem(item)">
                  <span>{{item.title}}</span>
                  <i></i>
              </li>
           </ul>
       </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      issueIMG: require('@/assets/icon/helpIco03.png'),
      mainVA: [
        {
          ico: require('@/assets/icon/helpIco02.png'),
          title: '主管理员视角',
          details: {
            video: '',
            list: [
              {
                title: '主业务流程',
                content: `<img src="http://www.czl.mobi/awfifnypm/html/images/index_img.jpg">`
              },
              {
                title: '关于新增仓库',
                content: `
                一般情况下用默认仓库就可以了，给默认仓库绑定一个仓库管理员，这个仓库管理员就可以管理默认仓库的资产和耗材。<br/>
                如果有分公司，则可以增加一个仓库，针对每个仓库绑定不同的部门，一般我们建议直接绑定一级部门，系统会自动默认一级部门下的所有子级部门。为新建的仓库指定一个仓库管理员就可以了。暂时一个仓库管理员只能管理一个仓库。仓库之间的所有数据都是独立的哦。<br/>
                <img src="http://www.czl.mobi/awfifnypm/html/images/index_img.jpg" style="margin-top:10px;">
                `
              },
              {
                title: '关于审批',
                content: `
                登录钉钉官方后台，工作台--审批，找到审批里面【企业资产领用】和【企业耗材领用】两种审批，设置审批流程，审批模板不能修改的哦。审批流程的设置和钉钉其他审批流程是一样。
                `
              },
              {
                title: '关于权限',
                content: `
                角色权限已经做了优化，主管理员只需根据需要绑定人员即可。
                `
              }
            ]
          }
        },
        {
          ico: require('@/assets/icon/helpIco01.png'),
          pathName: 'helpTabDetails',
          title: '仓库管理员视角',
          details: [
            {
              title: '资产管理',
              list: [
                {
                  video: '',
                  content: `
                        <div style="padding-bottom:5px">仓库管理员管理当前仓库的资产，设置当前仓库的维修管理员。审核、发放员工的资产领用、转移申请、报失申请、退还申请、退还申请等。</div>
                        <div>仓库管理员主要操作还是在钉钉pc客户端，请登录钉钉PC客户端。</div>
                      `
                },
                {
                  title: '资产批量导入',
                  video: '',
                  content: `
                        <div style="padding-bottom:5px">仓库管理员管理当前仓库的资产，设置当前仓库的维修管理员。审核、发放员工的资产领用、转移申请、报失申请、退还申请、退还申请等。</div>
                        <div>仓库管理员主要操作还是在钉钉pc客户端，请登录钉钉PC客户端。</div>
                      `
                },
                {
                  title: '二维码管理',
                  video: '',
                  content: `
                        <div style="padding-bottom:5px">仓库管理员管理当前仓库的资产，设置当前仓库的维修管理员。审核、发放员工的资产领用、转移申请、报失申请、退还申请、退还申请等。</div>
                        <div>仓库管理员主要操作还是在钉钉pc客户端，请登录钉钉PC客户端。</div>
                      `
                },
                {
                  title: '盘点任务',
                  video: '',
                  content: `
                        <div style="padding-bottom:5px">仓库管理员管理当前仓库的资产，设置当前仓库的维修管理员。审核、发放员工的资产领用、转移申请、报失申请、退还申请、退还申请等。</div>
                        <div>仓库管理员主要操作还是在钉钉pc客户端，请登录钉钉PC客户端。</div>
                      `
                }
              ]
            },
            {
              title: '耗材管理',
              list: [
                {
                  video: '',
                  content: `
                        <div style="padding-bottom:5px">办公耗材的管理支持耗材分类、录入、补充致量、库存、预警、领用申请等。</div>
                      `
                },
                {
                  title: '新增耗材',
                  video: '',
                  content: `
                    <div style="padding-bottom:5px">耗材目前只支持单个录入，后续版本将支持批量导入。</div>
                  `
                },
                {
                  title: '库存预警',
                  video: '',
                  content: `
                  <div style="padding-bottom:5px">耗材在录入的时候是需要填写库存下限的，当库存魏量小于或等于库存数量的时候，耗材会在库存预警列表里面。后续版本将对库存预警做工作通知。当任于库存下限时，系统自动发工作通知给仓库管理员。</div>
                  `
                }
              ] },
            {
              title: '业务流程',
              list: [
                {
                  title: '资产和耗材领用业务流程:',
                  content: `
                        <img src="" style="margin-top:10px;">
                        <div style="padding-bottom:5px">员工发起资产和耗材领用，系统自动进入钉钉的审批流程，审批通过后;系统发工作通知给仓库管理员和申请人。这是需要申请人线下去找仓库管理员领用。仓库管理员并线上确认，完成流程。</div>
                      `
                },
                {
                  title: '资产退还、报失业务流程:',
                  content: `
                        <img src="" style="margin-top:10px;">
                        <div style="padding-bottom:5px">退还和报失申请流程直接进入仓库管理员审核，仓库管理员审棱完成后，资产退还成功或报失成功。报失的资产由线下根据企业实际情况处理，系统只记录报失魏据。。</div>
                      `
                },
                {
                  title: '资产转移业务流程:',
                  content: `
                        <img src="" style="margin-top:10px;">
                        <div style="padding-bottom:5px">资产转移需要线下两位同事协商，A同事发起，同事同意，仓库管理员最后审核，审核通过，则资产转移流程完成，审核不通过，则转移申请自动失败。</div>
                      `
                },
                {
                  title: '资产保修业务流程:',
                  content: `
                        <img src="" style="margin-top:10px;">
                        <div style="padding-bottom:5px">员工直接发起资产维修申请，信息直接推送给资产所在仓库的维修管理员;维修管理线下完成维修任务，线上填写维修记录，并结束报修流程。</div>
                      `
                }
              ]
            }
          ]
        },
        {
          ico: require('@/assets/icon/helpIco04.png'),
          pathName: 'helpTabDetails',
          title: '员工视角',
          details: [
            {
              title: '员工视角',
              list: [
                {
                  title: '资产和耗材的领用',
                  video: '',
                  content: `
                        员工发起资产和耗材领用，系统自动进入钉钉的审批流程，审批通过后；系统发工作通知给仓库管理员和申请人。这是需要申请人线下去找仓库管理员领用。仓库管理员并线上确认，完成流程。
                      `
                },
                {
                  title: '资产退还、报失操作方法',
                  video: '',
                  content: `
                        当你发起资产退还或报失申请后，直接通知仓库管理员审核，仓库管理员审核完成后，资产退还成功或报失成功。报失的资产由线下根据企业实际情况处理，系统只记录报失数据。
                      `
                },
                {
                  title: '资产转移操作',
                  video: '',
                  content: `
                        资产转移需要线下两位同事协商，A同事发起，B同事同意，仓库管理员最后审核，审核通过，则资产转移流程完成，审核不通过，则转移申请自动失败。
                      `
                },
                {
                  title: '资产报修操作',
                  video: '',
                  content: `
                        员工直接发起资产维修申请，信息直接推送给资产所在仓库的维修管理员；维修管理线下完成维修任务，线上填写维修记录，并结束报修流程。
                      `
                },
                {
                  title: '资产盘点操作',
                  video: '',
                  content: `
                        员工直接发起资产维修申请，信息直接推送给资产所在仓库的维修管理员；维修管理线下完成维修任务，线上填写维修记录，并结束报修流程。
                      `
                }
              ]
            }
          ]
        }
      ],
      companyVA: [
        {
          title: '越界资产介绍',
          details: {
            list: [
              {
                content: `<div style="padding-bottom:5px">企业无论规模大小，资产管理都是企业管理层及其重要的工作，企业资产数据清晰、管理流程简单科学，能极大的降低企业运营成本。</div>
                <div style="padding-bottom:5px">鉴于企业资产管理的实践活动，我们从资产采购、管理、使用、维护、回收等资产全生命周期设计业务流程，全面实现企业资产线上采购、入库、分发、领用、报修、转移、退还、盘点等功能。从而
                实现业资产管理业务的全部在线化管理。以提高资产利用率、减少闲置浪费、优化资产管理流程、提升资产管理效率，从而降低企业运营成本。</div>
                <div style="padding-bottom:5px">通过对资产全生命周期的管理，产生多维度的数据报表，为企业管理决策、资产合理调配提供数据支持。</div>
                <div style="padding-bottom:5px">越界资产主要设计思想是以钉钉通讯人为核心，将资产按使用方式分为个人专用和部门共用两类，实现企业资产管理全员参与、部门参与，谁领用、谁
                保管，谁维护、谁盘点的原则，有效理清人与物的关系、划分权属责任。从而提升员工参与感、责任感。</div>
                `
              }
            ]
          }
        },
        {
          title: '名词解释',
          details: {
            list: [
              {
                title: '我领用的资产',
                content: `资产为员工个人使用，则归属在员工个人名下，为我的专属资产。例如：笔记本电脑、台式电脑等。
                `
              },
              {
                title: '我领用的耗材',
                content: `耗材为员工个人使用，则归属个人使用的，为我领用的耗材。例如：笔、办公桌椅、以及其他办公文具类。
                `
              },
              {
                title: '部门共用资产',
                content: `资产属于部门成员共同使用的，部门成员都可以领用。在领用的时候可以选领用为：部门共用资产，则资产归属在部门名下。例如：打印机、饮水机等其他属于部门成员共同使用的资产。
                `
              },
              {
                title: '部门共用耗材',
                content: `耗材属于部门成员共同使用的，员工再领取的时候可以选择领取为部门共用耗材。这是领用的耗材则归属部门名下。例如：打印纸张及其他消耗类耗材。
                `
              },
              {
                title: '资产的四种状态',
                content: `
                <i style="color:red">闲置状态：</i>资产没有员工或部门领用，则为闲置状态。<br/>
                <i style="color:red">在用状态：</i>资产录入后由部门或员工领用后则为在用状态；<br/>
                <i style="color:red">报修状态：</i>资产提交报修后，则为报修状态，当维修完成后，报修状态结束。<br/>
                <i style="color:red">报废状态：</i>指资产由仓库管理员进行报废操作后的状态。
                `
              }
            ]
          }
        },
        {
          title: '维修管理员视角',
          details: {
            video: '',
            list: [
              {
                title: '维修管理员操作流程',
                content: `
                1、接收维修任务<br/>
                2、确认维修任务<br/>
                3、线下完成维修<br/>
                4、上传维修记录，即可结束维修任务。
                `
              }
            ]
          }
        },
        {
          title: '角色管理',
          details: {
            video: '',
            list: [
              {
                title: '主管理员',
                content: `拥有最高权限，且随钉钉主管理员变更而变更。谁是当前企业的钉钉主管理员谁就是应用的主管理员。
                `
              },
              {
                title: '仓库管理员',
                content: `仓库管理员管理当前仓库的资产和耗材。负责录入和管理资产和耗材，设置当前仓库的维修管理员。审核、发放员工的资产领用、耗材领用、转移申请、转移申请、退还申请等，并发起盘点任务。
                `
              },
              {
                title: '维修管理员',
                content: `员工发起维修申请后，系统直接通知维修管理员。维修管理员首先确认接收任务，查看任务详情，线下完成维修任务，线上录入维修数据，完成维修任务。
                `
              },
              {
                title: '员工',
                content: `员工可在线领用资产和耗材。对资产进行报修、转移、退还、报失等操作，并查看个人数据报表。
                `
              },
              {
                title: '公司报表',
                content: `反映公司资产和耗材的所有数据报表。需主管理员指定成员才能查看。`
              }
            ]
          }
        },
        {
          title: '资产和耗材的领用操作',
          details: {
            video: '',
            list: [
              {
                title: '领用为个人资产',
                content: `指的是当前领用的资产为个人专用，例如：笔记本电脑、电脑主机、显示器。<br/>
                `
              },
              {
                title: '领用为个人耗材',
                content: `指的是当前领用的耗材为个人专用，例如：笔、本。<br/>
                `
              },
              {
                title: '领用为部门共用资产',
                content: `指的是当前资产为部门成员共用的资产。<br/>
                `
              },
              {
                title: '领用为部门共用耗材',
                content: `指的是当前耗材为部门成员共用的耗材。<br/><br/>
                `
              },
              {
                content: `
                领用为个人资产或耗材的在个人领用记录里面查询。<br/>
                领用为部门共用资产和耗材的在部门记录里面查询。
                `
              }
            ]
          }
        },
        {
          title: '资产报修操作',
          details: {
            video: '',
            list: [
              {
                title: '资产报修流程',
                content: `1、员工发起报修申请<br/>
                          2、仓库管理员收到维修工作通知，并确认<br/>
                          3、员工收到维修管理员确认工作通知<br/>
                          4、维修管理员线下完成维修任务<br/>
                          5、维修管理员上传维修费用、描述、图片等<br/>
                          6、维修记录上传后维修任务结束
                `
              }
            ]
          }
        },
        {
          title: '资产转移操作',
          details: {
            video: '',
            list: [
              {
                title: '资产转移流程',
                content: `1、员工发起转移，选择接收同事或接收部门<br/>
                          2、接收人收到转移工作通知，在应用里面确认接收<br/>
                          3、转移流程完成
                `
              }
            ]
          }
        },
        {
          title: '资产退还操作',
          details: {
            video: '',
            list: [
              {
                title: '资产退还流程',
                content: `1、员工发起退还申请，并将资产交还给仓库管理员<br/>
                          2、仓库管理员接收资产，并在应用里面确认<br/>
                          3、完成资产退还流程
                `
              }
            ]
          }
        },
        {
          title: '资产报失操作',
          details: {
            video: '',
            list: [
              {
                title: '资产报失流程',
                content: `1、员工对丢失资产发起报失<br/>
                          2、仓库管理员线下核对情况<br/>
                          3、仓库管理员在应用里确认，完成报失流程<br/>
                          4、资产进入报失状态
                `
              }
            ]
          }
        },
        {
          title: '仓库管理员发起盘点任务',
          details: {
            video: '',
            list: [
              {
                content: `仓库管理员可以根据实际盘点需求，选择按仓库盘点、按资产分类盘点、按部门进行盘点、按人员进行盘点等四种盘点方式。目前盘点任务发出后，在用资产归员工个人或部门人员进行盘点，闲置资产由仓库管理员进行盘点。后期版本中将更新选盘点人员，由管理员指定人员进行盘点。
                `
              }
            ]
          }
        },
        {
          pathName: '',
          title: '员工如何盘点',
          details: {
            video: '',
            list: [
              {
                content: `员工接收到盘点任务后，只需要打开应用，用越界资产里面的扫描按钮，扫描个人名下和部门名下的资产二维码都可以进行盘点。盘点的时候输入盘点要求即可完成盘点。
                `
              }
            ]
          }
        }
      ],
      reportVA: [
        {
          pathName: '',
          title: '个人数据报表解读',
          details: {
            video: '',
            list: [
              {
                content: `员工接收到盘点任务后，只需要打开应用，用越界资产里面的扫描按钮，扫描个人名下和部门名下的资产二维码都可以进行盘点。盘点的时候输入盘点要求即可完成盘点。
                `
              }
            ]
          }
        },
        {
          pathName: '',
          title: '部门数据报表解读',
          details: {
            video: '',
            list: [
              {
                content: `
                `
              }
            ]
          }
        },
        {
          pathName: '',
          title: '公司数据报表解读',
          details: {
            video: '',
            list: [
              {
                content: `
                `
              }
            ]
          }
        }
      ],
      otherVA: [
        {
          pathName: '',
          title: '如何申请发票',
          details: {
            video: '',
            list: [
              {
                title: '注意事项',
                content: `
                `
              }
            ]
          }
        },
        {
          pathName: '',
          title: '如何联系人工客服',
          details: {
            video: '',
            list: [
              {
                title: '注意事项',
                content: `
                `
              }
            ]
          }
        }
      ]
    };
  },
  methods: {
    clickItem (item) {
      this.$router.push({ name: item.pathName || 'helpDetails', params: { details: item.details, title: item.title } });
    }
  }
};
</script>

<style lang="scss" scoped>
#helpTemp{
    background-color: #f4f5f4 !important;
    font-family: PingFangSC-regular;
    font-size: 14px;
    ul{
        list-style-type: none
    }
    i,span,em{
        font-style: normal;
    }
    img{
        display: block;
    }
    .headerBg{
       width: 100%;
       height:142px;
       background-color:#3196FA;
       position: relative;
       .sayHi{
           color: rgba(255, 255, 255, 1);
           font-size: 18px;
           text-align: center;
           padding-top: 33px
       }
       .tabs{
           position: absolute;
           left: 50%;
           transform: translateX(-50%);
           bottom: -47px;
           width: 346px;
           height: 100px;
           background-color: rgba(255, 255, 255, 1);
           border-radius: 5px;
           box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
           padding: 0 27px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           li{
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               i{
                   display: block;
                   width: 36px;
                   height: 36px;
                   border-radius: 50%;
                   img{
                        width: 36px;
                        height: 36px;
                        border-radius: 50%;
                   }
               }
               p{
                   margin-top: 12px;
                   color: #8A8A8A;
                   font-size: 12px;
               }
           }
       }
    }
    .issue{
        width: 100%;
        margin-top: 65px;
        overflow: hidden;
        .issueTitle{
            display: flex;
            align-items: center;
            i{
                display: block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin:0 5px 0 12px;
                img{
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                }
            }
            span{
               color: #6C6B6B;
               font-size: 14px;
            }
        }
        ul{
            margin-top: 10px;
            li{
               width: 100%;
               height: 44px;
               padding: 0 15px 0 24px;
               display: flex;
               justify-content: space-between;
               align-items: center;
               background-color: #fff;
               border-bottom: 1PX solid  rgba(232, 232, 232, .5);
               &:last-child{
                   border-bottom: none
               }
               span{
                   color: rgba(16, 16, 16, 1);
                   font-size: 12px;
               }
               i{
                   width: 14px;
                   height: 14px;
                    background-image: url('~@/assets/icon/helpIco05.png');
                   background-repeat: no-repeat;
                   background-size:14px
               }
            }
        }
    }
}
</style>
